
<template>
  <div class="detail-page">
    <div class="detail-page-left"><img :src="originImg" /></div>
    <div class="detail">
      <ImgDeal
        ref="imgDeal"
        :url="imageUrls"
        :showOverlay="show_overlay"
        @imageToggleOverlay="getImageToggleOverlay"
        @highlight="highlight"
        @predictions="predictions"
        @resetImg="resetImg"
      ></ImgDeal>
      <!-- <img :src="imageUrls"> -->
    </div>

    <div class="detail-page-right">
      <ul>
        <li class="model-title"><div>文件信息</div></li>
        <li>
          <div class="info-name">
            文件名：
            <div class="info-txt">{{ imgInfo.filename }}</div>
          </div>
        </li>
        <li>
          <div class="info-name">
            文件尺寸：
            <div class="info-txt">
              {{ imgInfo.width }} * {{ imgInfo.height }}
            </div>
          </div>
        </li>
      </ul>
      <!-- <ul>
        <li class="model-title"><div>标尺信息</div></li>
        <li>
          <div class="info-name">
            标尺：
            <div class="info-txt">{{imgInfo.filename}}</div>
          </div>
        </li>
        <li>
          <div class="info-name">
            标尺长度：
            <div class="info-txt">{{imgInfo.width}} * {{imgInfo.height}}</div>
          </div>
        </li>
        <li>
          <div class="info-name">
            像素大小：
            <div class="info-txt">0.01972um</div>
          </div>
        </li>
      </ul>-->
      <ul>
        <li class="model-title"><div>颗粒信息</div> <div class="model-title-unit" v-if="particleInfo">(单位：{{ particleInfo.unit }})</div></li>
        <li v-if="!particleInfo">
          <div class="info-name">
            <div class="info-txt">未选中颗粒</div>
          </div>
        </li>
        <li v-else class="particle-info">
          <!-- <div class="info-name">
            序号:
            <div class="info-txt">{{ particleInfo.label }}</div>
          </div> -->
          <div class="info-name">
            面积:
            <div class="info-txt">
              {{ computeRound(particleInfo.attribute.area) }}
            </div>
          </div>
          <div class="info-name">
            周长:
            <div class="info-txt">
              {{ computeRound(particleInfo.attribute.perimeter) }}
            </div>
          </div>
          <div class="info-name">
            粒径:
            <div class="info-txt">
              {{ computeRound(particleInfo.attribute.diameter) }}
            </div>
          </div>

          <div class="info-name">
            外接矩形长边:
            <div class="info-txt">
              {{ computeRound(particleInfo.attribute.major_axis_length) }}
            </div>
          </div>
          <div class="info-name">
            外接矩形短边:
            <div class="info-txt">
              {{ computeRound(particleInfo.attribute.minor_axis_length) }}
            </div>
          </div>
          <div class="info-name">
            长宽比:
            <div class="info-txt">
              {{ computeRound(particleInfo.attribute.aspect_ratio) }}
            </div>
          </div>
          <div class="info-name">
            球形度:
            <div class="info-txt">
              {{ computeRound(particleInfo.attribute.sphericity) }}
            </div>
          </div>
          <div class="info-name">
            形状因子A/R:
            <div class="info-txt">
              {{ computeRound(particleInfo.attribute.shape_factor) }}
            </div>
          </div>
          <div class="info-name">
            平滑度:
            <div class="info-txt">
              {{ computeRound(particleInfo.attribute.smoothness) }}
            </div>
          </div>
         <!-- <div class="info-name">
            单位:
            <div class="info-txt">
              {{ particleInfo.unit }}
            </div>
          </div> -->
          

        </li>
      </ul>
    </div>

    <ul class="float-layer">
      <li @click="linkTo('/')"><svg-icon icon-class="home" /></li>
      <li @click="linkTo('/summary')"><svg-icon icon-class="summary" /></li>
      <li @click="download()"><svg-icon icon-class="download" /></li>
    </ul>
  </div>
</template>
 
<script>
import {
  app_access_token,
  access_token,
  getcode,
  feishuUserAdd,
  feishuUserQuery,
  highlight,
  imageInfo,
  predictions,
  download,
} from "@/api/index";

import { deepClone, readBinaryFile, computeRound,getQueryString } from "@/utils";
import Cookies from "js-cookie";

import ImgDeal from "@/components/imgDeal.vue";
import {
  getImageFile,
  getImageOverlay,
  getImageToggleOverlay,
} from "@/api/index";
export default {
  name: "index",
  data() {
    return {
      id: "",
      originImg: "",
      imageUrls: "",
      imageOverlayUrls: "",
      list: [],
      query: {
        page: 1,
        size: 10,
      },
      pageTotal: 0,
      show_overlay: false,
      imgInfo: {
        filename: "",
        height: "",
        width: "",
      },
      particleInfo: null,
      user_id: "",
    };
  },
  components: { ImgDeal },
  watch: {},
  computed: {
    computeRound() {
      return (val, num) => {
        let n = 4;
        if (num) {
          n = num;
        }
        return computeRound(val, n);
      };
    },
  },
  async created() {
    this.id = this.$route.query.id;
    let feishu_mobile = getQueryString("feishu_mobile")
 
    if(feishu_mobile) {
      localStorage.setItem("feishu_mobile",feishu_mobile);
    }
    let mobile = localStorage.getItem("feishu_mobile");
 
    if (mobile) {
      this.user_id = mobile.replace(/\+86/, "");
    }
    this.getImageFile();
    this.getImageOverlay();
    this.imageInfo();
  },
  beforeDestroy() {},
  methods: {
    async download() {
      if (!this.user_id) return;
      let res = await download({ task_id: this.id, user_id: this.user_id });

      const blob = new Blob([res], { type: "text/csv;charset=utf-8;" });
      const link = document.createElement("a");
      const url = URL.createObjectURL(blob);

      link.setAttribute("href", url);
      link.setAttribute("download", "文件导出");
      link.style.visibility = "hidden";

      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    },
    linkTo(url) {
      let router = { path: url };
      if (url !== "/") {
        router["query"] = { id: this.id };
      }
      this.$router.push(router);
    },
    async imageInfo() {
      if (!this.user_id) return;
      let res = await imageInfo(this.user_id, this.id);
      if (res) {
        this.imgInfo.filename = res.filename;
        this.imgInfo.height = res.height;
        this.imgInfo.width = res.width;
      }
    },
    resetImg(dotClick) {
      if (dotClick) {
        // this.show_overlay = false;
        // this.imageUrls = this.originImg;
      } else {
        if (this.show_overlay) {
          this.imageUrls = this.imageOverlayUrls;
        } else {
          this.imageUrls = this.originImg;
        }
      }
    },
    async predictions(data) {
      if (!this.user_id) return;
      var source = { task_id: this.id, user_id: this.user_id };
      var result = Object.assign(source, data);
      let res = await predictions(result);
      this.particleInfo = res;
      console.log(res, "######predictions");
    },
    async highlight(data) {
      if (!this.user_id) return;
      let res = await highlight(this.user_id, this.id, data);
      if (res) {
        let result = await readBinaryFile(res);
        const contentType = res.type;
        const blob = new Blob([result], { type: contentType });
        const url = window.URL.createObjectURL(blob);
        this.imageUrls = url;
      }
    },
    async getImageToggleOverlay() {
      if (!this.user_id) return;
      this.show_overlay = !this.show_overlay;
      let res = await getImageToggleOverlay(this.user_id, this.id, {
        show_overlay: this.show_overlay,
      });
      if (res) {
        let result = await readBinaryFile(res);
        const contentType = res.type;
        const blob = new Blob([result], { type: contentType });
        const url = window.URL.createObjectURL(blob);
        this.imageUrls = url;
      }
    },
    async getImageFile() {
      if (!this.user_id) return;
      let res = await getImageFile(this.user_id, this.id);
      if (res) {
        let result = await readBinaryFile(res);
        const contentType = res.type;
        const blob = new Blob([result], { type: contentType });
        const url = window.URL.createObjectURL(blob);
        this.originImg = url;
      }
    },
    async getImageOverlay() {
      if (!this.user_id) return;
      let res = await getImageOverlay(this.user_id, this.id);
      if (res) {
        let result = await readBinaryFile(res);
        const contentType = res.type;
        const blob = new Blob([result], { type: contentType });
        const url = window.URL.createObjectURL(blob);
        this.imageOverlayUrls = url;
        this.imageUrls = url;
        this.show_overlay = true;
      }
    },
    closeImageViewer() {
      this.showing = false;
    },
  },
};
</script>
 <style src="@/assets/detail.scss" scoped lang="scss"></style>